<html>
<head>
    <title>风险责任清单</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body {
            background: #F0F2F6;
        }


        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        img {
            width: 30px;
            width: 32px;
        }


        td {
            text-align: center;
            height: 50px; /*这里需要自己调整，根据自己的需求调整高度*/
            position: relative;
        }

        td[class=first] {
            width: 100px;
        }

        td[class=first]:before {
            content: "";
            position: absolute;
            width: 1px;
            height: 160px;
            top: 0;
            left: 0;
            background-color: #000;
            display: block;
            transform: rotate(-73deg);
            transform-origin: top;
            -ms-transform: rotate(-73deg);
            -ms-transform-origin: top;
        }

        .title1 {
            position: absolute;
            top: 0px;
            right: 0px;
        }

        .title2 {
            position: absolute;
            top: 26px;
            right: 70px;
        }


    </style>
</head>
<body>
<div class="page" id="page-monitor">

    <div class="page-title">风险管理 › 风险责任清单</div>
    <div class="page-main">
        <el-row>
            <el-col :span="24">
                <div class="main-head">
                    <el-form :inline="true" size="small" :model="searchForm">
                        <el-form-item label="计划名称">
                            <el-input placeholder="计划名称" style="width: 150px;"
                                      v-model="searchForm.trainingProject"></el-input>
                        </el-form-item>

                        <el-form-item label="状态">
                            <el-select style="width: 150px;" v-model="searchForm.trainFlag">
                                <el-option value="0" label="未开始"></el-option>
                                <el-option value="1" label="进行中"></el-option>
                                <el-option value="2" label="已结束"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="btnSearch">查询</el-button>
                            <el-button type="success" @click="btnAdd">新增</el-button>
                        </el-form-item>
                    </el-form>
                </div>

            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-table :data="tableData" :stripe="true" :border="true" size="mini" style="width: 100%">
                    <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                    <el-table-column prop="trainingProject" label="培训计划名称" align="center"></el-table-column>
                    <el-table-column prop="trainingStartTime" label="培训开始时间" align="center"></el-table-column>
                    <el-table-column prop="trainingEndTime" label="培训结束时间" align="center"></el-table-column>
                    <el-table-column prop="trainingPlace" label="培训地点" align="center"></el-table-column>
                    <el-table-column label="授课人" prop="userName" align="center"></el-table-column>
                    <el-table-column label="状态" prop="trainFlag" align="center">
                        <template slot-scope="scope">
                            <template v-if="scope.row.trainFlag==0">
                                <el-tag type="info">未开始</el-tag>
                            </template>
                            <template v-if="scope.row.trainFlag==1">
                                <el-tag>进行中</el-tag>
                            </template>
                            <template v-if="scope.row.trainFlag==2">
                                <el-tag type="success">已结束</el-tag>
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="280">
                        <template slot-scope="scope">
                            <el-button @click="showDetail(scope.row.trainingId)" round size="mini" icon="el-icon-search"
                                       type="primary">详情
                            </el-button>
                            <el-button round icon="el-icon-setting" size="mini"
                                       @click="handleEdit(scope.row.trainingId,scope.row.trainFlag)" type="info">编辑
                            </el-button>
                            <el-button @click="delPlan(scope.row.Id)" round size="mini" icon="el-icon-delete"
                                       type="danger">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="page-footer">
                    <el-pagination background layout="prev, pager, next" :pagesize="searchForm.pagesize"
                                   :total="searchForm.totalCount"
                                   :current-page.sync="searchForm.pageno" @current-change="onChangePage">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
    </div>

    <el-dialog :title="editMod?'编辑':'添加'" :visible.sync="addVisible" :show-close="false" width="40%" style="display: none">
        <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="计划名称" prop="trainingProject" :rules="[
                             {required:true,message:'计划名称不能为空!',trigger:'blur'}]">
                <el-input v-model="form.trainingProject"></el-input>
            </el-form-item>
            <el-form-item label="培训时间">
                <el-col :span="11">
                    <el-date-picker type="datetime" placeholder="开始时间" v-model="form.trainingStartTime"
                                    value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                    <el-date-picker type="datetime" placeholder="结束时间" v-model="form.trainingEndTime"
                                    value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item label="培训地点" prop="trainingPlace" :rules="[
                             {required:true,message:'培训地点不能为空!',trigger:'blur'}]">
                <el-input v-model="form.trainingPlace"></el-input>
            </el-form-item>
            <el-form-item label="培训组织部门" prop="trainingDepartment" :rules="[
                             {required:true,message:'培训组织部门不能为空!',trigger:'blur'}]">
                <el-select v-model="form.trainingDepartment" filterable placeholder="请选择部门">
                    <el-option
                            v-for="item in departMent"
                            :key="item.value"
                            :label="item.text"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="授课人" prop="lecturer" :rules="[
                             {required:true,message:'授课人不能为空!',trigger:'blur'}]">
                <el-select v-model="form.lecturer" filterable placeholder="请选择授课人员">
                    <el-option
                            v-for="item in child"
                            :key="item.Id"
                            :label="item.Text"
                            :value="item.Id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="培训内容" prop="fileIds" :rules="[
                             {required:true,message:'培训内容不能为空!',trigger:'blur'}]">
                <el-select v-model="form.fileIds" multiple placeholder="请选择培训内容(可多选)">
                    <el-option
                            v-for="item in file_list"
                            :key="item.fileId"
                            :label="item.fileName"
                            :value="item.fileId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="form.remarks"></el-input>
            </el-form-item>
            <el-divider content-position="right">
                <el-button type="primary" icon="el-icon-plus" size="small" @click="showUser">添加学员</el-button>
            </el-divider>
            <table width="100%" cellspacing="0">
                <tr>
                    <th>姓名</th>
                    <th>部门</th>
                    <th>岗位</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,i) in sel_user" style="font-size: 12px">
                    <td>{{item.userName}}</td>
                    <td>{{item.attributes.departmentName}}</td>
                    <td>{{item.attributes.workTypeName}}</td>
                    <td>
                        <el-button @click="del_sel_user(i)" type="primary" size="mini">删除</el-button>
                    </td>
                </tr>
            </table>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addVisible=false">取消</el-button>
            <el-button @click="plan_submit">确定</el-button>
        </div>

        <el-dialog
                width="40%"
                title="人员选择"
                :visible.sync="innerVisible"
                append-to-body>
            <el-table
                    ref="multipleTable"
                    :data="child"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        label="姓名" prop="userName"
                >
                </el-table-column>
                <el-table-column
                        prop="attributes.departmentName"
                        label="部门"
                        :filters="departMent"
                        :filter-method="filterTag"
                        filter-placement="bottom-end"
                >
                </el-table-column>
                <el-table-column
                        prop="attributes.workTypeName"
                        label="岗位">
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="innerVisible=false;sel_user=multipleSelection">确定</el-button>
            </div>
        </el-dialog>
    </el-dialog>


    <el-dialog title="培训人员进展详情" :visible.sync="detailVisible" :show-close="false" width="50%" style="display: none">
        <el-table :data="userDetail" :stripe="true" :border="true" size="mini" style="width: 100%">
            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            <el-table-column prop="userName" label="人员姓名" align="center"></el-table-column>
            <el-table-column prop="checkinTime" label="签到时间" align="center">
                <template slot-scope="scope">
                    <template v-if="scope.row.checkinTime == null">
                        未签到
                    </template>
                    <template v-if="scope.row.checkinTime != null">
                        {{scope.row.checkinTime.replace('T',' ')}}
                    </template>
                </template>
            </el-table-column>
            <el-table-column prop="downloadTime" label="下载时间" align="center">
                <template slot-scope="scope">
                    <template v-if="scope.row.downloadTime == null">
                        未下载
                    </template>
                    <template v-if="scope.row.downloadTime != null">
                        {{scope.row.downloadTime.replace('T',' ')}}
                    </template>
                </template>
            </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
            <el-button @click="detailVisible=false">取消</el-button>
            <el-button @click="detailVisible=false">确定</el-button>
        </div>
    </el-dialog>
</div>

<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            tableData: [],
            searchForm: {
                pagesize: 10,
                totalCount: 10,
                pageno: 1,
                projectNo: SiteConfig.account.projectNo,
                trainFlag: ''
            },
            editMod: false,
            addVisible: false,
            detailVisible: false,
            innerVisible: false,
            form: {},
            sel_user: [],
            multipleSelection: [],
            child: [],
            departMent: [],
            file_list: '',
            userDetail: [],
        },
        methods: {
            btnSearch: function () {
                this.getTrain();
            },
            onChangePage(page) {
                this.searchForm.pageno = page;
            },
            btnAdd() {
                this.addVisible = true;
                this.form = {};
                this.sel_user = {};
                this.editMod = false;
            },
            showUser() {
                this.innerVisible = true;
            },
            del_sel_user(index) {
                this.sel_user.splice(index, 1);
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            filterTag(value, row) {
                return row.attributes.departmentId === value;
            },
            plan_submit() {
                var oDate1 = new Date(this.form.trainingStartTime);
                var oDate2 = new Date(this.form.trainingEndTime);
                if (oDate1.getTime() > oDate2.getTime()) {
                    this.$message({type: 'error', message: '开始时间不能大于结束时间'})
                    // this.set(this.file_list);
                    return;
                }

                let uids = [], flids = [];
                if (JSON.stringify(this.sel_user) === '{}') {
                    this.$message({type: 'error', message: '请选择学员'});
                    return;
                }

                try {
                    for (let temp of this.sel_user) {
                        uids.push(temp.Id);
                    }
                } catch (e) {
                    this.$message({type: 'error', message: e});
                }


                this.form.learnPeopleIds = uids.join(',');
                this.form.fileIds = this.form.fileIds.join(',');
                this.form.projectNo = SiteConfig.account.projectNo;
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        if (!this.editMod) {
                            HttpUtil.get('Training/PlanAdd', this.form).success((r) => {
                                if (r.state == 0) {
                                    this.$message.success('添加成功');
                                    this.addVisible = false;
                                    this.getTrain();
                                    this.form = {
                                        projectNo: SiteConfig.account.projectNo
                                    }
                                } else {
                                    this.$message.warning('添加失败');
                                }
                            })
                        } else {
                            HttpUtil.get('Training/PlanUpdate', this.form).success((r) => {
                                if (r.state == 0) {
                                    this.$message.success('保存成功');
                                    this.addVisible = false;
                                    this.getTrain();
                                    this.form = {
                                        projectNo: SiteConfig.account.projectNo
                                    }
                                } else {
                                    this.$message.warning('修改失败');
                                }
                            })
                        }
                    }
                })

            },
            delPlan(id) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    HttpUtil.get('Training/PlanDelete', {Id: id}).success((r) => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getTrain();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            showDetail(id) {
                this.detailVisible = true;
                this.getDetail(id);
            },
            handleEdit(trainingId, trainFlag) {
                if (trainFlag == 2) {
                    this.$message({
                        type: 'info',
                        message: '培训时间已结束！不可编辑'
                    });
                    return;
                }
                HttpUtil.get('Training/PlanList', {trainingId: trainingId}).success((r) => {
                    this.form = {
                        Id: r.data[0].Id,
                        lecturer: r.data[0].lecturer,
                        projectNo: r.data[0].projectNo,
                        trainFlag: r.data[0].trainFlag,
                        trainingDepartment: r.data[0].trainingDepartment,
                        trainingProject: r.data[0].trainingProject,
                        trainingPlace: r.data[0].trainingPlace,
                        trainingStartTime: r.data[0].trainingStartTime,
                        trainingEndTime: r.data[0].trainingEndTime,
                        fileIds: [],
                        trainingId: r.data[0].trainingId
                    };
                    this.sel_user = []
                    for (let temp of this.child) {
                        for (let key in r.data[1]) {
                            if (r.data[1][key] == temp.Id) {
                                this.sel_user.push(temp);
                            }
                        }
                    }
                    ;
                    for (let key in r.data[2]) {
                        this.form.fileIds.push(r.data[2][key])
                    }
                    this.addVisible = true;
                    this.editMod = true;
                })
            },
            getTrain() {
                HttpUtil.get('Training/PlanList', this.searchForm).success((r) => {
                    for (let i = 0; i < r.data.length; i++) {
                        r.data[i].trainingStartTime = r.data[i].trainingStartTime ? r.data[i].trainingStartTime.replace('T', " ") : "";
                        r.data[i].trainingEndTime = r.data[i].trainingEndTime ? r.data[i].trainingEndTime.replace('T', " ") : "";
                    }
                    this.tableData = r.data;
                    this.searchForm.totalCount = r.total;
                })
            },
            getFile() {
                HttpUtil.get('Training/FileList', {projectNo: SiteConfig.account.projectNo}).success((r) => {
                    this.file_list = r.data;
                })
            },
            getDetail(id) {
                HttpUtil.get('Training/PeopleDetail', {trainingId: id}).success((r) => {
                    this.userDetail = r.data;
                })
            }
        },
        created: function () {
            $('.page').show();
            HttpUtil.get('User/Child', {parentId: SiteConfig.account.id}).success((res) => {
                this.child = res.data;
            });
            HttpUtil.get('Department/List', {projectNo: SiteConfig.account.projectNo}).success((res) => {
                let data = [];
                for (let temp of res.data) {
                    data.push({
                        text: temp.DepartmentName,
                        value: temp.DepartmentID,
                    })
                }
                this.departMent = data;
            });
            this.getTrain();
            this.getFile();
        },
        mounted: function () {
        }
    });


</script>

</body>
</html>
